<template>
    <el-dialog
            title="选择车型"
            :visible.sync="carModelFlag"
            width="800px"
            center>
        <el-steps :active="active" finish-status="success" simple >
            <el-step title="选择品牌" ></el-step>
            <el-step title="选择车系" ></el-step>
            <el-step title="选择车型" ></el-step>
        </el-steps>
        <ul class="letter-sort" v-if="active === 1">
            <li class="letter" :class="{selected:firstHover}"  @mouseenter="brandHover()">热门</li>
            <li class="letter " v-for="letter in letterArr"  :class="{selected:letter.selected}"  @mouseenter="brandHover(letter)">{{letter.code}}</li>
        </ul>
        <div class="letter-sort" v-if="active > 1">
            <div>
               <span class="select-title">已选车型：</span>
                <span class="select-car-info" v-if="selectBrandData.brandFlag">
                    <span>{{selectBrandData.cname}}</span>
                    <em class="close-btn" @click="clearSelectCarData(1,'brandFlag')">×</em>
                </span>
                <span class="select-car-info" v-if="selectCarTypeData.carTypeFlag">
                     <span>{{selectCarTypeData.cname}}</span>
                    <em class="close-btn" @click="clearSelectCarData(2,'carTypeFlag')">×</em>
                </span>
                <span class="select-car-info" v-if="selectCarDisData.disFlag">
                     <span>{{selectCarDisData.displacement}}</span>
                    <em class="close-btn" @click="clearSelectCarData(3,'disFlag')">×</em>
                </span>
            </div>

       </div>
        <div class="car-conent" v-if="active === 1">
            <div class="second-item">
                <ul v-for="item in brandItemData">
                    <li class="car-item" @click="selectBrand(item)">
                        <img :src="item.logo" alt="" class="car-logo">
                        <span class="carname">{{item.cname}}</span>
                    </li>
                </ul>

            </div>
        </div>
        <div class="car-conent" v-if="active === 2">
            <div class="second-item">
                <div v-for="item in carTypeItemData">
                    <p class="car-row-title">
                        <i class="row-title-icon"></i>
                        <span class="row-title-name">{{item.carType.cname}}</span>
                    </p>
                    <p class="car-item" v-for="list in item.list" @click="selectCarType(list)">
                        <span class="carname">{{list.cname}}</span>
                    </p>
                </div>

            </div>
        </div>
        <div class="car-conent" v-if="active === 3">
            <div class="second-item">
                <p class="car-item" v-for="displacement in carDisplacementData" @click="selectDisplacement(displacement)">
                    <span class="carname">{{displacement.displacement}}</span>
                </p>
            </div>
        </div>
        <div class="car-conent" >
            <div class="second-item" v-if="active ===4">
                <p class="detail-item" v-for="detail in carYearData" @click="selectCarYear(detail)">
                    <span class="carname">{{detail}}</span>
                </p>
            </div>
        </div>
        <div class="car-conent" v-if="active ===5">
            <div class="second-item">
                <p class="detail-item" v-for="detail in carDetailData" @click="selectDetail(detail)">
                    <span class="carname">{{detail.trimLevel}}</span>
                </p>
            </div>
        </div>

        <span slot="footer" class="dialog-footer" v-if="active>=3">
            <el-button @click="carModelFlag = false">取 消</el-button>
            <el-button type="primary" @click="closeCarModel()">确 定</el-button>
         </span>
    </el-dialog>
</template>
<script>
  import Car from './../service/Car-service'
  import PY from './../service/Pinyin.service'
  const _Car = new Car();
  export default {
    data() {
      return {
        codeArr:[],
        brandData:[],
        brandItemData:[],
        hotBrandData :[],
        letterArr:[],
        carTypeItemData:[],
        active:1,
        carDisplacementData:[],
        carDetailData:[],
        carYearData:[],
        firstHover:true,
        carModelFlag: false,
        selectBrandData:{},
        selectCarTypeData:{},
        selectCarDisData:{},
        selectCarYearData:{},
      };
    },
    created(){
    },
    watch:{
      carModelFlag:function (val) {
        if(!val)return;
        this._getBrand();
        this.selectBrandData={},this.selectCarTypeData={},this.selectCarDisData={},this.selectCarYearData={};this.active= 1;
      }
    },
    methods:{
       _getBrand(){
         _Car.getCarBrand(1).then((data)=>{
           this.brandItemData = this.hotBrandData =data.resultSet;
         });
         _Car.getCarBrand(-1).then((data)=>{
           let brandData = data.resultSet;
           this._getLetterArr(brandData);
         });
       },
      _getLetterArr(brandData){
        let letterArr = _Car.getLetterArr(brandData);
        this.brandData = _Car.dealBrandData(brandData,letterArr);
        letterArr.forEach((item)=>{
          let letterObj = {
            code:item,
            selected:false
          };
          this.letterArr.push(letterObj)
        });
      },
      brandHover(letter){
        this.letterArr.forEach((item)=>{
          item.selected = false;
        });
        if(!letter){
          this.firstHover = true;
          this.brandItemData = this.hotBrandData;
          return
        }
        this.firstHover = false;
        letter.selected = true;
        for (let i = 0; i<this.brandData.length;i++){
          if(this.brandData[i].code === letter.code){
            this.brandItemData = this.brandData[i].content;
          }
        }
      },
      //选择品牌
      selectBrand(item){
        this.selectBrandData = item;
        this.selectBrandData.brandFlag = true;
        this.active = 2;
        let params = {
          pId: item.id
        };
        _Car.getCarTypeInfor(params).then(data=>{
          this.carTypeItemData = data.resultSet;
        })
      },
      //选择车型
      selectCarType(carType){
        this.active = 3;
        this.selectCarTypeData = carType;
       this.selectCarTypeData.carTypeFlag = true;
        let params = {carTypeId: carType.id};
        _Car.getCarDisplacementData(params).then(data=>{
          this.carDisplacementData = data.resultSet;
        })
      },
      //选择排量
      selectDisplacement(displacement){
        this.selectCarDisData = displacement;
        this.selectCarDisData.disFlag = true;
        this.active = 4;
        let params ={
          modelId:this.selectCarTypeData.id,
          displacement:displacement.displacement
        };
        _Car.getCarYearData(params).then(data=>{
          console.log(data.resultSet)
          this.carYearData = data.resultSet;
        })
      },
      selectCarYear(year){
        this.active = 5;
        let params = {
          carTypeId: this.selectCarTypeData.id,
          year: year,
          displacement:this.selectCarDisData.displacement
        };
        _Car.getCarDetailInfor(params).then(data=>{
          console.log(this.carDetailData)
          this.carDetailData = data.resultSet;
        })
      },
      //选择具体车型
      selectDetail(detail){
        this.closeCarModel(detail)
      },
      closeCarModel(detail){
        this.carModelFlag = false;
        let obj = this.selectBrandData;
        if(detail){

        }
        this.$emit("carSelected",obj);
      },
      clearSelectCarData(index,type){
        this.active = index;
        switch (type){
          case 'brandFlag':this.selectBrandData[type] =false;break;
          case 'carTypeFlag':this.selectCarTypeData[type] =false;break;
          case 'disFlag':this.selectCarDisData[type] =false;
        }
      }
    }
  };
</script>
<style scoped lang="scss" type="text/scss">
    .letter-sort{
        width: 100%;
        overflow:auto;
        padding: 10px 0;
        box-sizing: border-box;
        .letter{
            padding: 5px 11px;
            text-align: center;
            font-weight: 700;
            font-size: 12px;
            color: #9B9B9B;
            cursor: pointer;
            float: left;
        }
        .selected{
            background: #3084df none repeat scroll 0 0;
            color: #fff;
        }
        .select-car-info{
            float: left;
            background-color: #318AD2;
            position: relative;
            padding: 2px 30px 2px 10px;
            font-size: 14px;
            color: #FFFFFF;
            margin-right: 10px;
        }
        .select-title{
            float: left;
            font-size: 16px;
            padding: 2px 13px;
        }
        .close-btn{
            width: 10px;
            position: absolute;
            top: 2px;
            right: 13px;
            cursor: pointer;
            font-size: 16px;
        }
    }
    .car-conent{
        display: flex;
        align-items: center;
        justify-content: center;
        .second-item{
            width: 100%;
            height: 300px;
            overflow-y: auto;
            .car-item{
                float: left;
                text-align: center;
                width: 170px;
                padding: 5px 0;
                border: 1px solid #E4E4E4;
                margin: 10px 7px;
                font-size: 14px;
                color: #4A4A4A;
                cursor: pointer;
                .car-logo{
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    margin: 0 20px;
                    vertical-align: middle;
                }
                .carname{
                    padding-right:20px ;
                }
            }
            .car-item:hover{
                border: 1px solid #318AD2;
            }
            .detail-item{
                float: left;
                text-align: center;
                padding: 5px 0;
                border: 1px solid #E4E4E4;
                margin: 10px 7px;
                font-size: 14px;
                color: #4A4A4A;
                cursor: pointer;
                width: 340px;
            }
            .detail-item:hover{
                border: 1px solid #318AD2;
            }
            .car-row-title{
                width: 100%;
                height: 30px;
                line-height: 30px;
                color: #333;
                margin: 2px 0;
                float: left;
                overflow: hidden;
                .row-title-icon{
                    width: 0;
                    margin: 5px 0;
                    display: block;
                    float: left;
                    height: 0;
                    border-width: 9.7px;
                    border-style: solid;
                    border-color: transparent transparent transparent #D8D8D8;
                }
                .row-title-name {
                    font-size: 16px;
                    color: #000000;
                    float: left;
                }
            }
        }
    }

</style>